<template>
    <div class="modal fade" id="equip_edit" tabindex="-1" role="dialog"
         aria-labelledby="equip_edit">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup_box">
                        <div class="g-form-line">
                            <div class="newList_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">
                                            <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                        </span>
                                </button>
                                <p class="font_1">设备信息</p>
                            </div>
                            <div class="newList_right">
                                <div class="newList_right_left">
                                    <p>设备IMEI：</p>
                                    <div class="border_style">
                                        <input class="inputs" readonly :placeholder="equipInfo.imei"></div>
                                    <p>设备名：</p>
                                    <div class="border_style">
                                        <input class="inputs" :placeholder="equipInfo.equipName" v-model="equipName">
                                    </div>
                                    <p>设备手机卡号： </p>
                                    <div class="border_style">
                                        <input class="inputs" readonly :placeholder="equipInfo.sim">
                                    </div>
                                    <p>备注：</p>
                                    <div class="border_style">
                                        <input class="inputs" :placeholder="equipInfo.remark" v-model="remark">
                                    </div>
                                </div>
                                <div class="newList_right_right">
                                    <p>联系人：</p>
                                    <div class="border_style">
                                        <input class="inputs" :placeholder="userInfo.userNickname" readonly>
                                    </div>
                                    <p>联系电话：</p>
                                    <div class="border_style">
                                        <input class="inputs" :placeholder="userInfo.phoneNumber" readonly>
                                    </div>
                                    <p>车牌号：</p>
                                    <div class="border_style">
                                        <input class="inputs" :placeholder="userInfo.carNumber" readonly>
                                    </div>
                                    <p>更换图标：</p>
                                    <div class="img_box_1">
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_1.png" alt=""
                                            class=""></span></label>
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_2.png" alt=""
                                            class=""> </span></label>
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_3.png" alt=""
                                            class=""> </span></label>
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_4.png" alt=""
                                            class=""></span></label>

                                    </div>
                                    <div class="img_box_2">
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span
                                            class="boat_icon"><img
                                            src="../../assets/images/home_image/device_5.png" alt=""></span></label>
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_6.png" alt=""
                                            class=""></span></label>
                                        <label><input name="Fruit" type="radio" class="vehicle_raido"/><span><img
                                            src="../../assets/images/home_image/device_7.png" alt=""
                                            class=""></span></label>
                                    </div>
                                </div>
                                <div class="modal-footer searchFor_bottom">
                                    <button type="button" class="btn btn-success searchFor_right_leftBtn"
                                            @click="SubmitModify">
                                        确定
                                    </button>
                                    <button type="button" class="btn btn-success export  searchFor_right_rightBtn"
                                            data-dismiss="modal">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                equipInfo: {},
                userInfo: {},
                equipName: '',
                remark: '',
            }
        },
        methods: {
            getInfo (data) {
                this.equipInfo = data
                if (data.dealerId) {
                    this.$ajax
                        .userInfo
                        .getUserInfo(data.dealerId)
                        .then((res) => {
                            let result = res.data
                            if (result.code === 200) {
                                this.userInfo = result.result
                            } else if (result.code === 408) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                                let timer = setTimeout(() => {
                                    clearTimeout(timer)
                                    $('#msgModal').modal('hide')
                                    this.$router.push({path: '/login'})
                                }, 2000)
                            } else {
                                this.$store.commit('showAlert', {error: result.msg})
                            }
                        }, () => {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                        })
                }
            },
            SubmitModify () {
                let regName = /^\d+$/
                if (regName.test(this.equipName)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.name})
                    return
                }
                let data = {
                    id: this.equipInfo.id,
                    equipName: this.equipName !== '' ? this.equipName : this.equipInfo.equipName,
                    remark: this.remark !== '' ? this.remark : this.equipInfo.remark,
                    password: this.equipInfo.password,
                }
                this.$ajax
                    .equip
                    .editEquip(data)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.updateSuc})
                            this.$emit('refreshTable', result.result)
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#equip_edit').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .popup_box {
        width: 892px;
        height: 470px;
    }

    .g-form-line {
        float: left;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
        margin: 0;

    }

    .modal-body {
        margin: 0;
        padding: 0;
    }

    .modal-content {
        width: 892px;
        height: 470px;
    }

    .newList_left {
        position: relative;
        width: 200px;
        height: 470px;
        background: #263238;
        float: left;
        text-align: center;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .newList_left .font_1 {
        color: rgb(23, 210, 156);
        text-align: center;
        line-height: 470px;
        font-size: 14px;
    }

    .newList_right {
        position: relative;
        color: rgb(153, 153, 153);
        margin-top: 24px;
        font-size: 12px;
    }

    .newList_right p {
        position: absolute;
        height: 20px;
        width: 292px;
        line-height: 2px;
        text-align: left;
        padding-top: 10px;
    }

    .newList_right .inputs {
        border: 0;
        height: 29px;
        line-height: 26px;
        width: 292px;
        color: rgb(23, 210, 156);
    }

    .newList_right .border_style {
        display: inline-block;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
        text-align: left;
        width: 292px;
        line-height: 25px;
        margin-top: 26px;
        margin-bottom: 20px;
    }

    .newList_right_left {
        position: absolute;
        width: 291px;
        left: 200px;
        margin-left: 30px;
    }

    .newList_right_right {
        width: 291px;
        position: absolute;
        left: 500px;
        margin-left: 60px;
    }

    .newList_right_right span {
        padding-right: 13px;
    }

    .newList_right_right img {
        padding-left: 10px;

    }

    input {
        border: 0;
    }

    .img_box_1 {
        position: absolute;
        width: 291px;
        height: 80px;
        text-align: left;
        margin-top: 48px;
    }

    .img_box_2 {
        margin-top: 80px;
        position: absolute;
        width: 291px;
        text-align: left;
    }

    .vehicle_raido {
        padding-right: 6px;
        padding-top: 60px;
    }

    .newList_right_right .boat_icon {
        padding-right: 10px;
    }

    .modal-footer {
        border: 0;
    }

    .searchFor_right_leftBtn {
        position: absolute;
        top: 370px;
        left: 350px;
    }

    .searchFor_right_rightBtn {
        position: absolute;
        top: 370px;
        left: 580px;
    }
</style>
